<template>
  <div class="toEXCEL">
    <el-table
      :data="tableData"
      style="width: 100%"
      id="stationTable"
      :span-method="arraySpanMethod"
      border=""
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="资料" width="180">
        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="down">表格导出</el-button>
  </div>
</template>

<script>
import OMS from '../../utils/tools.js';
export default {
  name: 'toEXCEL',
  components: {},
  props: {},
  data() {
    return {
      mergeObj: {},
      mergeColumn: ['date', 'name', 'address'],
      tableData: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    setTimeout(() => {
      this.tableData = [
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区江汉',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金循礼门',
        },
        {
          date: '2016-05-03',
          name: '王大虎',
          address: '上海市普陀区金广埠屯',
        },
        {
          date: '2016-05-03',
          name: '咱仨',
          address: '上海市普陀区金沙九街',
        },
        {
          date: '2016-05-04',
          name: '小号',
          address: '上海市普陀区金沙九街',
        },
      ];
      this.dataAnalysis(this.tableData);
    }, 100);
  },
  mounted() {},
  methods: {
    dataAnalysis(tableData) {
      for (let key of this.mergeColumn) {
        let count = 0;
        this.mergeObj[key] = [];
        tableData.forEach((item, index) => {
          if (index === 0) {
            this.mergeObj[key].push(1);
          } else {
            if (item[key] === tableData[index - 1][key]) {
              this.mergeObj[key][count] += 1;
              this.mergeObj[key].push(0);
            } else {
              count = index;
              this.mergeObj[key].push(1);
            }
          }
        });
      }
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeColumn.indexOf(column.property) !== -1) {
        if (this.mergeObj[column.property][rowIndex]) {
          return {
            rowspan: this.mergeObj[column.property][rowIndex],
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },

    down() {
      OMS.downLoadXlsx({
        dom: 'stationTable',
        name: '预报计算结果表',
        ColumnWdth: [12, 10, 27, 27, 27, 27, 27, 27, 27],
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
